<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>通用</title>
		<!--<link rel="stylesheet" type="text/css" href="css/common.css" />-->
		<link rel="stylesheet" type="text/css" href="css/homePage.css" />
		<link rel="stylesheet" type="text/css" href="css/scsec.css"/>
	</head>

	<body>
		<div id="wrap">
			<div id="wrap_left">
				<div id="wrap_left_cont">
					<ul>
						<li>
							<div class="user_head"><img src="img/userhead.png" alt="" /></div>
						</li>
						<li><button class="login_btn">登录</button></li>
					</ul>
					<ul class="my_game">
						<li><h3>我关注的游戏</h3></li>
						<div class="divide"></div>
						<li><img src="img/index-headImg04.png" alt="" />我关注的游戏</li>
						<li class="plus"><img src="img/plus.png" alt="" /><span>添加游戏</span></li>
					</ul>
				</div>
			</div>
			<div id="wrap_right">
				<nav class="nav">
					<div class="menu"><img src="img/menu.png" /></div>
					<span>天涯明月刀</span>

				</nav>
				<div class="content">
				<div class="lunbotu">
						<div class="imgsbox">
							<img src="img/shouye/lunbo3.jpg" alt="" />
							<img src="img/shouye/lunbo1.jpg" alt="" />
							<img src="img/shouye/lunbo2.jpg" alt="" />
							<img src="img/shouye/lunbo3.jpg" alt="" />
						</div>
						<div class="pointbox">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
					<div class="promotPosition">
						<img src="img/shangcheng/diyiye/tiandao2.png"/>
						<h3 class="promottiandao">天涯明月刀</h3>
						<span class="guanzhu">关注游戏领取游戏专属礼包</span>
						<button>关注</button>
					</div>
					
			<div class="slider"></div>		
		<div class="hot">
			<h3 class="hotprice">热门礼包</h3>
			<ul class="priceDetail">
				<li class="firstli"> 
		<img src="img/shangcheng/diyiye/remen2.png" alt="" />
		<span class="lingqutiaojian">领取条件:连续签到25天</span>
		<b class="price">10q币</b>
		<div class="superHot">超级火爆被抢光</div>
		<img src="img/shangcheng/diyiye/remen4.png"/>
		<span class="lingqutiaojian">领取条件:连续签到25天</span>
		<b class="price">10q币</b>
		<div class="superHot">超级火爆被抢光</div>
				</li>
				<li>
					<img src="img/shangcheng/diyiye/remen3.png" alt="" />
		<span class="lingqutiaojian">领取条件:连续签到25天</span>
		<b class="price">800元宝&nbsp&nbsp&nbsp&nbsp;600宝石</b>
		<div class="superHot">领取</div>
		<img src="img/shangcheng/diyiye/remen3.png"/>
		<span class="lingqutiaojian">领取条件:免费</span>
		<b class="price">800元宝&nbsp&nbsp&nbsp&nbsp;600宝石</b>
		<div class="superHot">领取</div>
				</li>
			</ul>
		</div>
					

				</div>
             <div class="footerslider"></div>
				<footer id="footer">
					<ul>
						<li><img src="img/index-icon-homeIn.png" alt="" />
							<div>首页</div>
						</li>
						<li><img src="img/index-icon-playOut.png" alt="" />
							<div>视频</div>
						</li>
						<li><img src="img/index-icon-tagOut.png" alt="" />
							<div>商城</div>
						</li>
						<li><img src="img/index-icon-useOut.png" alt="" />
							<div>我的</div>
						</li>
					</ul>

				</footer>

			</div>

		</div>
		<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto.animate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/touch-0.2.14.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//初始化
			$("#wrap").css("height", $(window).height());
			//滑动菜单
			touch.on($("#wrap_right"), "swipeleft swiperight", function(e) {
				var even = e || event;
				even.preventDefault();
				switch (even.type) {
					case 'swipeleft':
						$("#wrap_right").css("left", "0px");
						break;
					case 'swiperight':
						$("#wrap_right").css("left", "70%");
						break;
					default:
						break;
				}
			});
			//点击按钮滑动
			touch.on($(".menu"), "tap", function(e) {
				var even = e || event;
				even.preventDefault();
				even.stopPropagation();
				$("#wrap_right").css("left", "70%");
			});
			//点击空白恢复
			touch.on($("#wrap_right"), "tap", function(e) {
				var even = e || event;
				even.preventDefault();
				$("#wrap_right").css("left", "0px");
			});
			
			var index = 1; //记录当前播放的是第一张图片
			var width = $(window).width();
			var lunbo = document.querySelector(".lunbotu");
			$(".lunbotu").css("width", width + "px");
			$(".imgsbox img").css("width", width + "px");
			$(".imgsbox").css("width", 4 * width + "px");
			$(".imgsbox").css("left", -width + "px");
			$(".pointbox div").eq(0).css("background-color", "#f46259");
			$(".lunbotu").on("swiperight swipeleft", function(e) {
				var even = e || event;
				even.preventDefault();
				even.stopPropagation();
				switch (even.type) {
					case 'swiperight':
						right();
						break;
					case 'swipeleft':
						left();
						break;
				}
			});
			var timer = setInterval(left, 1800);
			var timer1;
			lunbo.addEventListener("touchstart", function(e) {
				var even = e || event;
				even.preventDefault();
				clearInterval(timer);
				clearTimeout(timer1);
			}, false);
			lunbo.addEventListener("touchend", function(e) {
				var even = e || event;
				even.preventDefault();
				timer1 = setTimeout(function() {
					timer = setInterval(left, 1800);
				}, 500);
			}, false);
            console.log(timer1)
			function right() {
				index--;
				if (index < 0) {
					index = 2;
					$(".imgsbox").css({
						left: -3 * width
					})
				}
				$(".imgsbox").animate({
					left: -index * width
				}, 400);
				$(".pointbox div").css("background-color", "#CEC1C1");
				$(".pointbox div").eq(index - 1).css("background-color", "#f46259");
			}

			function left() {
				index++;
				if (index == 4) {
					index = 1;
					$(".imgsbox").css({
						left: 0
					})
				}
				$(".imgsbox").animate({
					left: -index * width
				}, 400);
				$(".pointbox div").css("background-color", "#CEC1C1");
				$(".pointbox div").eq(index - 1).css("background-color", "#f46259");
			};
		</script>
	</body>

</html>